<!DOCTYPE  html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>房屋委托</title>
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta content="width=1200, initial-scale=1, maximum-scale=1, user-scalable=1" name="viewport">
    <link rel="stylesheet" th:href="@{../css/index.css}">
    <link th:href="@{../css/zeng/lrtk.css}" rel="stylesheet" type="text/css"/>
    <style>
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1s;
            animation-name: fade;
            animation-duration: 1s;
        }

        @-webkit-keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }

        @keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }

        .icon.location {
            background: url(../images/index/location.png) no-repeat center;
            position: absolute;
            top: 50%;
            right: 10px;
            width: 30px;
            height: 30px;
            cursor: pointer;
            margin-top: -15px;
        }
    </style>
    <link rel="stylesheet" th:href="@{../css/life.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.css}">
</head>
<body>
<div class="schb" style="display: none">
    <div class="sc">
        <div class="header">
            <span>提示</span><span class="close">×</span>
        </div>
        <div class="content">
            <p class="success">您的委托申请已成功提交，我们将尽快与您取得联系提供专业支持</p>
            <!--<span class="go-resource"><a href="javascript:void(0);" class="see-sc">查看xxxxx >></a></span>-->
        </div>
    </div>
</div>
<div class="hb" style="display: none">
    <div class="lg">
        <div class="wel_icon separator"></div>
        <!-- 导航 -->
        <ul class="clearfix">
            <!--  <li class="check">快捷登录</li>-->
            <li class="check">账号密码登录</li>
        </ul>
        <!-- 显示/隐藏 -->
        <div class="passdl">
            <div class="input-list">
                <input type="text" name="user_name" id="user_name" required placeholder="请输入用户名/手机号">
            </div>
            <div class="input-list">
                <input type="password" name="user_pas" id="user_pas" required placeholder="请输入6-16位密码">
                <p id="login_message" class="invalid" style="display: block;"></p>
            </div>

            <div class="flex">
                <span class="unselected_icon" id="J-m-isSeven" data-isseven="0"></span><span class="mdl">一周内免登录</span>
                <a href="/findccount/index" class="forget-pass">忘记密码</a>
            </div>
        </div>

        <div class="btn">
            <a href="javascript:;" id="login_button" th:data="'/newEntrust'">登 录</a>
        </div>
        <div class="go-register">没有账号？现在就去 <a th:href="'/register/index?uri=/newEntrust'">注册</a></div>
    </div>
</div>
<div th:replace="common-header :: #sub-header"></div>
<!-- banner -->
<div class="banner">
    <!-- 选择 -->
    <ul class="clear_spot clear_fix" style="width: 100%; min-width: 1200px;position: relative"
        onmouseenter="clearAuto()" onmouseleave="auto()">
        <li class="banner_li fade"><a><img class="banner_img" src="../images/entrustBanner.jpg" height="100%"></a></li>
    </ul>
    <!-- 分页 -->
    <a class="np prev" onmouseenter="setOpacityOne()" onclick="plusSlides(-1)">❮</a>
    <a class="np next" onmouseenter="setOpacityOne()" onclick="plusSlides(1)">❯</a>
</div>
<div class="content area">
    <div class="life_service">
        <div class="life_left fl">
            <img src="../images/newLife/nav_icon.png" alt="">
            <span>荣者房屋委托</span>
            <b style="font-size: 12px">（右边获取电话 →）</b>
        </div>
        <div class="life_right fr pr">
            <a href="javascript:void(0)">电话咨询</a>
            <div class="tel_tc">
                <i class="fa fa-volume-control-phone"
                   aria-hidden="true"
                   style="font-size: 20px">
                </i>
                <span>4000909956</span>
            </div>
        </div>
    </div>

    <div class="life_img_cart">
        <div>
            <form id="entrust-form" type="POST">
                <span style="font-size: 1.6rem;margin-bottom: 25px;display: inline-block">请留下您的房屋信息和联系方式，我们将在30分钟内与您取得联系提供专业支持</span>
                <input type="text" placeholder="请填写真实姓名(必填)" title="（请输入姓名！）" name="realName" required>
                <input type="tel" placeholder="请填写一个有效的联系电话(必填)" pattern="^[1]\d{10}$" title="（请输入正确的手机号！）" name="mobile" required>
                <!--<input type="text" placeholder="请填写房屋所在城市" name="usercity" required>-->
                <select name="cityId" placeholder="请填写房屋所在城市(必填)" required>
                    <option value="">请选择城市(必填)</option>
                    <option value="5001">重庆</option>
                </select>
                <input type="text" placeholder="请填写小区名称(必填)" title="（请输入小区！）" name="neighborhoodName" required>
                <textarea placeholder="其他信息(选填)" name="comment"></textarea>
                <div class="btn-grounp">
                    <button type="submit" id="submitEntrust">提 交</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div th:replace="common-footer :: #sub-footer"></div>
<div th:replace="common-rightbar :: #sub-rightbar"></div>
<script th:src="@{../js/jquery.min.js}"></script>
<script th:src="@{../js/common.js}"></script>
<script th:src="@{../js/zeng/newIndex.js}"></script>
<script th:src="@{../js/login.js}"></script>
<script th:inline="javascript">
    //var isLogin=[[${session.userLoginKey_==null}]];
    /*验证表单 */
    function validateForm() {
        /*console.log(isLogin);
        if(isLogin){
            $('.hb').show();
        }else{
            doApply();
        }*/
        doApply();
    }

    function doApply(){
        var url="/house/delegationApply";
        var data=$("#entrust-form").serialize();
        //console.log(data);
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    document.getElementById("entrust-form").reset();
                    $('.schb').show();
                } else if (data.code == -1) {
                    $('.hb').show();
                }

            }
        });

        return false;
    }
    $('#entrust-form').submit(function () {
        validateForm();
        return false;
    });
    /* 关闭 */
    var lgEl = document.getElementsByClassName('hb')[0];
    lgEl.addEventListener('click', function (event) {
        if (event.target !== event.currentTarget) return;
        lgEl.style.display = 'none';
    }, false)

    $('.close').click(function(){
        $('.schb').hide();
    });
</script>
</body>
</html>
